<template>
    <div class="forget-wrapper">
        <h2 class="forget-title">重置密码</h2>
        <p class="forget-subtitle">请输入您的邮箱接收验证码</p>

        <el-form ref="resetForm" :model="resetForm" :rules="rules" class="forget-form">
            <el-form-item prop="email">
                <el-input 
                    v-model="resetForm.email" 
                    placeholder="请输入邮箱"
                    prefix-icon="el-icon-message"
                    class="custom-input">
                </el-input>
            </el-form-item>

            <el-form-item prop="code">
                <div class="validate-container">
                    <el-input 
                        v-model="resetForm.code" 
                        placeholder="请输入验证码"
                        prefix-icon="el-icon-chat-line-round"
                        class="custom-input">
                    </el-input>
                    <el-button 
                        type="primary" 
                        :disabled="disabled"
                        class="validate-btn"
                        @click="sendVerificationCode">
                        {{ buttonContent }}
                    </el-button>
                </div>
            </el-form-item>

            <el-form-item prop="newPassword">
                <el-input 
                    type="password" 
                    v-model="resetForm.newPassword" 
                    placeholder="请设置新密码"
                    prefix-icon="el-icon-lock"
                    class="custom-input">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button 
                    type="primary" 
                    class="submit-button"
                    @click="onResetPassword">
                    重置密码
                </el-button>
            </el-form-item>

            <div class="form-footer">
                <el-link type="primary" @click="$router.push('/login')">
                    <i class="el-icon-arrow-left"></i> 返回登录
                </el-link>
            </div>
        </el-form>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: 'ResetPassword',
    data() {
        return {
            countdown: 0,
            disabled: false,
            timer: null,
            emailCode: '',
            buttonContent: '发送验证码',
            resetForm: {
                email: '',
                code: '',
                newPassword: '',
            },
            rules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        sendVerificationCode() {
            // 发送重置密码请求到后端
            if (this.disabled) return; // 如果按钮已禁用，则不执行发送逻辑

            // 发送验证码的逻辑...
            console.log('验证码发送逻辑');
            request.get(`/email/findByEmail/${this.resetForm.email}`)
                .then(res => {
                    if (res.code == '0') {
                        this.$message({
                            type: 'success',
                            message: "验证码已发送到您的邮箱,请查收"
                        })
                        this.emailCode = res.data;
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        })
                        return
                    }
                })
            this.countdown = 60; // 设置倒计时为60秒
            this.disabled = true; // 禁用按钮
            this.buttonContent = `${this.countdown}秒后可重发`; // 更新按钮文本为倒计时

            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--; // 每秒减少1秒
                    this.buttonContent = `${this.countdown}秒后可重发`; // 更新按钮文本
                } else {
                    clearInterval(this.timer); // 清除定时器
                    this.countdown = 0; // 重置倒计时
                    this.disabled = false; // 启用按钮
                    this.buttonContent = '发送验证码'; // 重置按钮文本
                }
            }, 1000);
        },
        onResetPassword() {
            this.$refs.resetForm.validate((valid) => {
                if (valid) {
                    if (this.resetForm.code != this.emailCode) {
                        this.$message({
                            type: 'error',
                            message: '验证码不正确'
                        });
                        return;
                    }
                    // 发送重置密码请求到后端
                    request.get("/user/forget", {
                        params: {
                            email: this.resetForm.email,
                            newPassword: this.resetForm.newPassword,
                        },
                    }).then(res => {
                        if (res.code == '0') {
                            this.$message({
                                type: 'success',
                                message: "密码重置成功"
                            });
                            this.$router.push("/login");
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                } else {
                    console.error('重置密码失败: 表单校验失败');
                    return false;
                }
            });
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>

<style scoped>
.forget-wrapper {
  width: 100%;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.forget-title {
  font-size: 28px;
  font-weight: 600;
  color: #E67E22;
  margin-bottom: 10px;
  text-align: center;
}

.forget-subtitle {
  font-size: 15px;
  color: #666;
  margin-bottom: 30px;
  text-align: center;
}

.forget-form {
  margin-top: 10px;
}

.validate-container {
  display: flex;
  gap: 16px;
}

.validate-btn {
  flex-shrink: 0;
  min-width: 120px;
  height: 44px;
  font-size: 14px;
  border-radius: 8px;
  background: linear-gradient(to right, #F39C12, #F9CA24) !important;
  border: none;
  transition: all 0.3s ease;
}

.validate-btn:hover:not(:disabled),
.validate-btn:focus:not(:disabled),
.validate-btn:active:not(:disabled) {
  background: linear-gradient(to right, #E67E22, #F39C12) !important;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
  transform: translateY(-2px);
}

.submit-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(to right, #F39C12, #F9CA24) !important;
  border: none;
  transition: all 0.3s ease;
}

.submit-button:hover,
.submit-button:focus,
.submit-button:active {
  background: linear-gradient(to right, #E67E22, #F39C12) !important;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
  transform: translateY(-2px);
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  font-size: 14px;
}

.form-footer .el-link {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Element UI 组件样式覆盖 */
:deep(.el-input__inner) {
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  border: 1px solid #f0d5b3;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #F39C12;
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.1);
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-input__prefix) {
  left: 5px;
  color: #F39C12;
  height: 100%;
  display: flex;
  align-items: center;
}
:deep(.el-input__prefix .el-input__icon) {
  height: auto;
}
:deep(.el-input__prefix i) {
  font-size: 16px;
  line-height: 1;
}

:deep(.el-input__inner) {
  padding-left: 38px;
}

:deep(.el-link.el-link--primary) {
  color: #F39C12;
}

:deep(.el-link.el-link--primary:hover) {
  color: #E67E22;
}

:deep(.el-button--primary) {
  background-color: #F39C12;
  border-color: #F39C12;
  color: #fff;
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus),
:deep(.el-button--primary:active) {
  background-color: #E67E22;
  border-color: #E67E22;
  color: #fff;
}

:deep(.el-button--primary.is-active) {
  background-color: #E67E22;
  border-color: #E67E22;
  color: #fff;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .forget-title {
    font-size: 24px;
  }

  .forget-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
  }

  .validate-container {
    gap: 10px;
  }

  .validate-btn {
    min-width: 100px;
    font-size: 13px;
  }
}
</style>